#include("/static/themes/dolphin/layout/layout.html")
#@layout()
#define css()
<link rel="stylesheet" href="/static/admin/pages/photos/css/index.css">
<script src="/static/admin/pages/photos/js/laysize.js"></script>
#end
#define content()
<div class="doc-container" id="doc-container">
    <div class="container-fixed">
        <div class="container-inner">
            <section class="msg-remark">
                <h1>相册</h1>
                <div class="layui-row">
                    #photosPage(pageSize=18)
                    #for(photos: photosPage.data)
                    <div class="layui-col-xs6 layui-col-sm4 layui-col-md3 layui-col-lg2 photos-box">
                        <a class="photos" href="/photos/#(photos.id)">
                            #if(photos.isEncryption == 1)
                            <img src="/static/admin/pages/photos/img/loading.gif" class="lazyload coverImg"
                                 data-src="/static/admin/pages/photos/img/protected.jpg">
                            #else
                            <img src="/static/admin/pages/photos/img/loading.gif" class="lazyload coverImg"
                                 data-src="#(photos.coverUrl??)">
                            #end
                            <div class="photos-mask">
                                <div class="photos-mask-num">
                                    <i class="layui-icon layui-icon-picture"></i>
                                </div>
                                <div class="photos-msg">
                                    #if(photos.isEncryption == 1)
                                    <h2 class="photos-mask-title"> 此内容被密码保护</h2>
                                    #else
                                    <h2 class="photos-mask-title"> #(photos.name??)</h2>
                                    <p class="photos-mask-desc">#(photos.desc??)</p>
                                    #end
                                </div>
                            </div>
                        </a>
                    </div>
                    #else
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                        <div class="no-content">这里什么都没有~</div>
                    </div>
                    #end
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                        #pageRender(photosPage, preText="上一页",nextText="下一页")
                    </div>
                    #end
                </div>
            </section>
        </div>
    </div>
</div>
#end
#define js()
<script>
    $('.photos').mouseover(function () {
        $(this).children(".photos-mask").addClass("show-mask");
    });
    $('.photos').mouseout(function () {
        $(this).children(".photos-mask").removeClass("show-mask");
    });
</script>
#end
